<script lang="ts" setup>
import useUserinfoStore from "@@/store/useUserinfoStore";
import { omitText } from "@@/utils/tools/project";
import { _require } from "@@/utils/tools/tools";
import { copyText } from "@@/utils/tools/project";
const userinfoStore = useUserinfoStore();
const { userinfo } = storeToRefs(userinfoStore);
const currentUrl = window.location.origin;
/**邀请链接 */
const invitUrl = ref(`${currentUrl}/#/?invit=${userinfo.value?.invit}`);
</script>

<template>
  <Ccard class="invit">
    <Rimage :src="_require('src/assets/images/vipHome/invit-bg.png')" />
    <div class="invit_content auto-mt-xs">
      <h3>{{ $t("yao-qing-you-li") }}</h3>
      <div>{{ $t("yao-xin-yong-hu-na-da-jiang") }}</div>
      <div>{{ $t("zui-gao-huo-de-200-mei-bbc") }}</div>
      <VanButton
        @click="copyText(invitUrl)"
        color="var(--C-B1)"
        size="small"
        class="invit_btn"
      >
        {{ $t("fen-xiang") }}
      </VanButton>
      <CcopyText :copy-text="invitUrl">
        {{ $t("fen-xiang-lian-jie") }}:
        {{ omitText(invitUrl, [10, "...", 10]) }}
      </CcopyText>
    </div>
  </Ccard>
</template>

<style lang="less" scoped>
.invit {
  position: relative;
  .invit_content {
    color: var(--C-B2);
    position: absolute;
    right: var(--gap-md);
    top: var(--gap-md);
    padding: var(--gap-sm);
    width: 45%;
    font-size: var(--T-S-sm);
  }
  .invit_btn {
    color: red !important;
    padding: 0 var(--gap-lg);
  }
}
</style>
